{% extends '_base.html' %}

{% block style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/markdown-style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/article.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/default.min.css') }}">
<style>
    #replyTo{
        color: #556;
        font-size: 14px;
        cursor: pointer;
    }
</style>
{% endblock %}

{% block head_js %}
<script src="{{ url_for('static', filename='js/marked.js') }}"></script>
<script src="{{ url_for('static', filename='js/highlight.min.js') }}"></script>
{% endblock %}

{% block title %}
Article
{% endblock %}

{% block nav_class %}top-show{% endblock %}

{% block header_content %}
<div class="container">
    <div class="box">
        <div class="h1">2222222222223333333333</div>
        <div class="info">2021年11月11日 - 1000 - 100</div>
    </div>
</div>
{% endblock %}

{% block main_content %}
<article id="article">
</article>

<div class="comment">
    <div class="title">
        <b>留下一条友善的评论
            <span id="replyTo" title="取消回复"></span>
        </b>
    </div>
    <div class="send-comment">
        <form action="">
            <input type="text" hidden name="replyTo" id="replyToInput">
            <div class="info">
                <div class="item">
                    <input type="text" placeholder="昵称（必填）" required>
                </div>
                <div class="item">
                    <input type="text" placeholder="邮箱（必填）">
                </div>
                <div class="item">
                    <input type="text" placeholder="网址（选填）">
                </div>
            </div>
            <div class="content">
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
            <div class="comment-submit">
                <input type="submit" name="" id="">
            </div>
        </form>
    </div>
    <div class="show-comment">
        <div class="comment-item">
            <div class="comment-info">
                <div class="profile">
                    <a href="#">
                        <img src="./img/logo.jpg" alt="">
                    </a>
                </div>
                <div class="name">
                    <a href="#">
                        邪王暗焰
                    </a>
                </div>
                <div class="reply">
                    <a href="#">
                        回复
                    </a>
                </div>
                <div class="info">
                    发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                </div>
            </div>
            <div class="comment-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                blanditiis debitis accusamus cupiditate at similique?
            </div>
        </div>
        <div class="comment-item">
            <div class="comment-info">
                <div class="profile">
                    <a href="#">
                        <img src="./img/logo.jpg" alt="">
                    </a>
                </div>
                <div class="name">
                    <a href="#">
                        邪王2345678
                    </a>
                </div>
                <div class="reply">
                    <a href="#">
                        回复
                    </a>
                </div>
                <div class="info">
                    发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                </div>
            </div>
            <div class="comment-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                blanditiis debitis accusamus cupiditate at similique?
            </div>
            <div class="children">
                <div class="comment-item">
                    <div class="comment-info">
                        <div class="profile">
                            <a href="#">
                                <img src="./img/0.jpg" alt="">
                            </a>
                        </div>
                        <div class="name">
                            <a href="#">
                                邪王暗焰
                            </a>
                        </div>
                        <div class="reply">
                            <a href="#">
                                回复
                            </a>
                        </div>
                        <div class="info">
                            发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                        </div>
                    </div>
                    <div class="comment-body">
                        <a href="javascript:;" class="comment-at">@邪王暗焰</a>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime
                        corrupti
                        quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                        blanditiis debitis accusamus cupiditate at similique?
                    </div>
                </div>
                <div class="comment-item">
                    <div class="comment-info">
                        <div class="profile">
                            <a href="#">
                                <img src="./img/logo.jpg" alt="">
                            </a>
                        </div>
                        <div class="name">
                            <a href="#">
                                邪王暗焰
                            </a>
                        </div>
                        <div class="reply">
                            <a data-key="1" href="#">
                                回复
                            </a>
                        </div>
                        <div class="info">
                            发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                        </div>
                    </div>
                    <div class="comment-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                        quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                        blanditiis debitis accusamus cupiditate at similique?
                    </div>
                </div>
            </div>
        </div>
        <div class="comment-item">
            <div class="comment-info">
                <div class="profile">
                    <a href="#">
                        <img src="./img/aaa.jpg" alt="">
                    </a>
                </div>
                <div class="name">
                    <a href="#">
                        邪王暗焰
                    </a>
                </div>
                <div class="reply">
                    <a href="#">
                        回复
                    </a>
                </div>
                <div class="info">
                    发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                </div>
            </div>
            <div class="comment-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                blanditiis debitis accusamus cupiditate at similique?
            </div>
        </div>
        <div class="comment-item">
            <div class="comment-info">
                <div class="profile">
                    <a href="#">
                        <img src="./img/0.jpg" alt="">
                    </a>
                </div>
                <div class="name">
                    <a href="#">
                        邪王暗焰
                    </a>
                </div>
                <div class="reply">
                    <a href="#">
                        回复
                    </a>
                </div>
                <div class="info">
                    发布于 6 天前  (  Google Chrome 76.0.3809.89   Android 10 ) 来自: 广东省中山市 联通
                </div>
            </div>
            <div class="comment-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit quisquam maxime corrupti
                quis sed quam tempora, temporibus voluptatibus, aut sequi, repellendus tempore suscipit
                blanditiis debitis accusamus cupiditate at similique?
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script >hljs.initHighlightingOnLoad();</script>
<script>
    let xhr = new XMLHttpRequest()
    xhr.open('get', './README.md', false)
    xhr.send(null)

    let content = xhr.responseText
    let article = document.getElementById('article')
    article.innerHTML += marked.parse(content);
    console.log(marked.parse(content));
    hljs.highlightAll();
</script>
<script>
    let replyTo = document.getElementById('replyTo')
    let replyToInput = document.getElementById('replyToInput')
    replyTo.addEventListener('click', function(){
        replyToInput.value = ""
        replyTo.innerText = ""
    })

    
    let commentList = document.querySelectorAll('.comment-item')
    for (let i=0; i<commentList.length; i++){
        let name = commentList[i].querySelector('.name a').innerText
        let replyBtn = commentList[i].querySelector('.reply a')
        replyBtn.href = "#replyTo"
        replyBtn.addEventListener('click', function(e){
            // e.preventDefault()
            let k = replyBtn.dataset.key
            replyTo.innerText = "@ "+ name
            replyToInput.value = k
        })
    }
</script>
{% endblock %}
